<template>
  <div class="home-box">

    <div class="content">
      <transition name="fade">
        <router-view></router-view>
      </transition>
    </div>
    <van-tabbar v-model="active" @change="change" :class="[iosFlag]">
      <van-tabbar-item>
        首页
        <template slot="icon" slot-scope="props">
          <!--<span class="iconfont icon-1shuju"></span>-->
          <img :src="props.active ? 'static/img/chart-active.png' : 'static/img/chart.png'" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item>
        分类
        <template slot="icon" slot-scope="props">
          <img :src="props.active ? 'static/img/order-active.png' : 'static/img/order.png'" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item>
      </van-tabbar-item>
      <van-tabbar-item class="tabbar-center">
        排行
        <template slot="icon" slot-scope="props">
          <img :src="props.active ? 'static/img/rank-active.png' : 'static/img/rank-normal.png'" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item >
        AUTOKEN
        <template slot="icon" slot-scope="props">
          <img :src="props.active ? 'static/img/polling-active.png' : 'static/img/polling.png'" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item>
        我的
        <template slot="icon" slot-scope="props">
          <img :src="props.active ? 'static/img/mine-active.png' : 'static/img/mine.png'" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>

  export default {
    data() {
      return {
        active: 0,
        icon: {
          normal: '//img.yzcdn.cn/1.png',
          active: '//img.yzcdn.cn/2.png'
        },
        iosFlag:null
      }
    },

    mounted() {
      // this.windowChange();
      //this.$router.push("/index");//页面重新加载还原到数据页面
      // this.ismobile(1);
      this.active = active_g
    },

    methods: {
      change() {
        switch(this.active) {
          case 0: //x等于0
            this.$router.push("/index")
            break;
          case 1: //x等于1
            this.$router.push("/class")
            break;
          case 2:
            this.active = active_g
            break;
          case 3:
            this.$router.push("/rank")
            break;
          case 4:
            if(sessionStorage.getItem("usermessage")){
              this.$router.push("/game")
            }else{
              this.$router.push("/login")
            }
            break;
          case 5:
            if(sessionStorage.getItem("usermessage")){
              this.$router.push("/mine")
            }else{
              this.$router.push("/login")
            }

            break;
        }
      },
      windowChange(){

        let $this = this;
        window.addEventListener('hashchange', function(e){
          if(window.location.href.indexOf('index') != -1){
            $this.active = 0;
          }else if(window.location.href.indexOf('class') != -1){
            $this.active = 1;
          }else if(window.location.href.indexOf('rank') != -1){
            $this.active = 3;
          }else if(window.location.href.indexOf('game') != -1){
            $this.active = 4;
          }else if(window.location.href.indexOf('mine') != -1){
            $this.active = 5;
          }
        })
      },

      //移动端适配-首页底部菜单栏
      ismobile(test){
          var u = navigator.userAgent, app = navigator.appVersion;
          if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){
            if(window.location.href.indexOf("?mobile")<0){
              try{
                if(/iPhone|mac|iPod|iPad/i.test(navigator.userAgent)){
                  this.iosFlag = 'ddisplay';
                }else{
                  this.iosFlag = ' ';
                }
              }catch(e){
              }
            }
          }else if( u.indexOf('iPad') > -1){
            this.iosFlag = 'ddisplay';
          }else{
            this.iosFlag = ' ';

          }
        }
    }
  }
</script>

<style scoped="scoped">
  .home-box {
    height: 100vh;
    box-sizing: border-box;
    padding-bottom: 50px;
    overflow: hidden;
  }
  .home-box .content {
    height:100%;
  }
  .fade-enter-active {
    -webkit-transition: all .5s;
    transition: all .5s;
  }
  .iconfont {
    font-size:20px;
  }
  .ddisplay{
    display: none;
  }
  .tabbar-center {
    position: absolute;
    left: 50%;
    top: -10px;
    width: 50px;
    height: 50px;
    margin-left: -25px;
    border-radius: 50%;
    box-shadow: 0px -2px 10px #dadada;
    background: #fff;
    z-index: 999;
  }
</style>
